<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="${basePath }">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>西普茗茶商品-购物车</title>
<meta name="renderer" content="webkit">

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="assets/css/themes/light.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages/blog.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
	var isHTML5 = true;
</script>
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<script src="js/excanvas.min.js"></script> 
    <script type="text/javascript">
		isHTML5 = false;
	</script>
<![endif]-->
<style type="text/css">
body {
	background: #fef9f3 !important;
}
</style>
</head>
<!--/head-->
<!-- BEGIN BODY -->
<body class="page-footer-fixed">
	<!-- BEGIN HEADER -->
	<div class="header navbar">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-2 text-center">
					<a href="./" class="icon_a_link">
						<i style="font-size: 24px; line-height: 40px; height: 40px;" class="iconfont icon-qh-home text-gold">&#xe61a;</i>
					</a>
				</div>
				<div class="col-xs-8 text-center">
					<h4>购物车</h4>
				</div>
				<div class="col-xs-2 text-center">
					<a href="item/infocenter.jsp" class="icon_a_link">
						<i style="font-size: 24px; line-height: 40px; height: 40px;" class="iconfont text-gold icon-qh-infocenter">&#xe61d;</i>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- END HEADER -->
	<div class="clearfix "></div>
	<!-- BEGIN CONTAINER -->
	<div class="page-container">

		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<div class="page-content no-space" style="margin-bottom: 50px !important;">

				<c:if test="${cartMap==null||fn:length(cartMap)<=0 }">
					<h4 class="text-center">购物车是空的，快去加点东西进来吧！</h4>
				</c:if>
				<c:if test="${cartMap!=null&&fn:length(cartMap)>0 }">
					<div class="blog-page ">
						<c:forEach items="${cartMap}" var="shoppingCarMap">
							<c:set var="operationMode" value="${shoppingCarMap.value.operationMode}"></c:set>
							<c:set var="goodsItemList" value="${shoppingCarMap.value.goodsItemList}"></c:set>
							<div class="container" style="background: #f5f5f5; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
								<div class="row">
									<div class="col-xs-1 text-center padding-top-10">
										<input type="checkbox" class="SelectShopButton" data-target="#one_shop_div_${operationMode }">
									</div>
									<div class="col-xs-11">
										<c:if test="${operationMode=='西普茗茶' }">
											<h4>${operationMode }
												<%-- <small><span class="label label-sm label-gold">满${shopApplication.mzcMinNumber }件包邮</span></small> --%>
											</h4>
										</c:if>
										<c:if test="${operationMode=='西普茗茶' }">
											<h4>${operationMode }
												<%-- <small><span class="label label-sm label-gold">满${shopApplication.qianhuiMinLimit }元包邮</span></small> --%>
											</h4>
										</c:if>
									</div>
								</div>
							</div>
							<div id="one_shop_div_${operationMode }" class="bg-white margin-top-10" style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
								<c:forEach items="${goodsItemList}" var="item" varStatus="itemStat">
									<div class="container" style="padding-top: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid #eee;">
										<div class="row">
											<div class="col-xs-1 text-center padding-top-20" class="">
												<input type="checkbox" class="SelectOneGoodsButton" data-goodsId="${item.goods.goodsId }" data-total="#one_goods_total_${item.goods.goodsId}" data-inputId="#buy_number_${item.goods.goodsId}">
											</div>
											<div class="col-xs-10">
												<div class="media padding-top-5">
													<a href="item/${item.goods.goodsId }" class="pull-left">
														<img alt="" src="${item.goods.goodsMainPic }" class="media-object">
													</a>
													<div class="media-body">
														<h5 class="media-heading">
															<span>${item.goods.goodsName}</span>
														</h5>
														<p>
															<span class="text-red"><strong><i class="fa fa-rmb"></i> <fmt:formatNumber value="${item.goods.goodsPrice}" type="currency" pattern="#,##0.##" /></strong></span>
														</p>
														<div class="row">
															<div class="col-xs-7">
																<div class="input-group">
																	<span class="input-group-btn">
																		<button class="btn default number_minus_button" type="button" data-target="#buy_number_${item.goods.goodsId}">-</button>
																	</span>
																	<input type="text" class="form-control text-center buy_number_input" value="${item.number }" id="buy_number_${item.goods.goodsId}" data-goodsId="${item.goods.goodsId}"
																		data-minnumber="${item.goods.goodsMinBuyNumber!=null?item.goods.goodsMinBuyNumber:1 }" data-maxnumber="${item.goods.goodsInventoryNumber}" data-price="${item.goods.goodsPrice}"
																		data-total="#one_goods_total_${item.goods.goodsId}" data-checked="false">
																	<span class="input-group-btn">
																		<button class="btn default number_add_button" type="button" data-target="#buy_number_${item.goods.goodsId}">+</button>
																	</span>
																</div>
															</div>
															<div class="col-xs-5 padding-top-8 text-left">
																<span class="">库存:${item.goods.goodsInventoryNumber}</span>
															</div>
														</div>
														<p class="margin-top-5">
															小计:<i class="fa fa-rmb text-red"></i> <strong class="text-red one_goods_total" id="one_goods_total_${item.goods.goodsId}" data-checked="false"> <fmt:formatNumber
																	value="${item.goods.goodsPrice*item.number}" type="currency" pattern="#,##0.##" />
															</strong>
														</p>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
											<div class="col-xs-1 text-center padding-top-20">
												<i class="iconfont text-gold icon-qh-rubbish delete_this_goods" style="font-size: 24px; line-height: 40px; height: 40px; color: red" data-goodsId="${item.goods.goodsId}">&#xe63a;</i>
											</div>
										</div>
									</div>
									<div class="clearfix"></div>
								</c:forEach>
							</div>
						</c:forEach>
					</div>
				</c:if>
			</div>
		</div>
		<!-- END CONTAINER -->
	</div>
	<!-- BEGIN FOOTER -->
	<div class="footer" style="padding: 4px 0px 4px 0px;">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 text-left padding-top-8">
					<span class=""><input type="checkbox" class="SelectAllButton"> 全选</span>
				</div>
				<div class="col-xs-9 text-right">
					<span class="text-light">(共<strong id="all_goods_number">0</strong>件)
					</span> <span>总计:<span class="text-red"><strong><i class="fa fa-rmb"></i> <span id="all_goods_total_price">0</span></strong></span></span> <span><button class="btn gold" disabled="disabled" id="count_money_button"
							style="border-radius: 5px !important;">立即结算</button></span>

				</div>
			</div>
		</div>
	</div>
	<!-- END FOOTER -->

	<form action="confirm_order" method="post" style="display: none;" id="form_for_confirm_order">
		<input type="hidden" id="ids_for_confirm_order">
	</form>

	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="assets/plugins/select2/select2.min.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="js/app.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->

	<script>
		$(function()
		{
			App.init();

			//格式化为#,##0.00
			var fomatMoney = function(money)
			{
				if (/[^0-9\.]/.test(money))
					return money;
				money = money.replace(/^(\d*)$/, "$1.");
				money = (money + "00").replace(/(\d*\.\d\d)\d*/, "$1");
				money = money.replace(".", ",");
				var re = /(\d)(\d{3},)/;
				while (re.test(money))
				{
					money = money.replace(re, "$1,$2");
				}
				money = money.replace(/,(\d\d)$/, ".$1");
				return money.replace(/^\./, "0.")
			}

			//商品购买数量加减
			$(".number_minus_button").click(function()
			{
				var inputId = $(this).attr("data-target");
				var inputObj = $(inputId);
				currentNum = parseInt(inputObj.val());
				var minnumber = inputObj.attr("data-minnumber");

				if (currentNum > minnumber)
				{
					inputObj.val(--currentNum);
				}
				else
				{
					inputObj.val(minnumber);
				}
				updateGoodsInCar(inputObj.attr("data-goodsId"), inputObj.val());
				countPrice(inputId);
			});
			$(".number_add_button").click(function()
			{
				var inputId = $(this).attr("data-target");
				var inputObj = $(inputId);
				currentNum = parseInt(inputObj.val());
				var maxnumber = inputObj.attr("data-maxnumber");

				if (currentNum < maxnumber)
				{
					inputObj.val(++currentNum);
				}
				else
				{
					inputObj.val(maxnumber);
					alert("最多能购买 " + maxnumber + " 件。");
				}
				updateGoodsInCar(inputObj.attr("data-goodsId"), inputObj.val());
				countPrice(inputId);
			});
			$(".buy_number_input").keyup(function()
			{
				var inputObj = $(this);
				currentNum = parseInt(inputObj.val());
				var minnumber = inputObj.attr("data-minnumber");
				var maxnumber = inputObj.attr("data-maxnumber");
				if (isNaN(currentNum))
				{
					inputObj.val(minnumber);
				}
				else
				{
					inputObj.val(currentNum);
					if (currentNum < minnumber)
					{
						inputObj.val(minnumber);
					}
					if (currentNum > maxnumber)
					{
						inputObj.val(maxnumber);
						alert("最多能购买 " + maxnumber + " 件。");
					}
				}
				updateGoodsInCar(inputObj.attr("data-goodsId"), inputObj.val());
				countPrice("#" + $(this).attr("id"));
			});

			function countPrice(inputId)
			{
				var curNum = parseInt($(inputId).val());
				var onePrice = parseFloat($(inputId).attr("data-price"));
				$($(inputId).attr("data-total")).html(fomatMoney((curNum * onePrice).toFixed(2)));
				$(".SelectOneGoodsButton").trigger("change");
			}

			function updateGoodsInCar(id, num)
			{
				$.post('${basePath}u_update_goods_in_shoppingcar',
				{
					'cart.goodsId' : id,
					'cart.goodsNumber' : num
				},
				//回调函数 
				function(json)
				{
					if (json.success == true)
					{
					}
					else
					{
						alert(json.info);
					}
				},
				//返回类型
				"json");
			}

			//删除当前选中的商品
			$(".delete_this_goods").click(function()
			{
				if (confirm("确定删除此商品吗?"))
				{
					$.post('${basePath}u_delete_from_shoppingcar',
					{
						'commonStr' : $(this).attr("data-goodsId")
					},
					//回调函数 
					function(json)
					{
						if (json.success == true)
						{
							//true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")
							window.location.reload(true);
						}
						else
						{
							alert(json.info);
						}
					},
					//返回类型
					"json");
				}
			});

			//多选操作,选中/清除店铺下面的所有商品
			$(".SelectShopButton").change(function()
			{
				if ($(this).attr("checked") == "checked")
				{
					$($(this).attr("data-target")).find(".SelectOneGoodsButton").attr("checked", "checked");
				}
				else
				{
					$($(this).attr("data-target")).find(".SelectOneGoodsButton").removeAttr("checked");
				}
				$($(this).attr("data-target")).find(".SelectOneGoodsButton").trigger("change");
				$.uniform.update();
			});
			//多选操作,选中/清除所有商品
			$(".SelectAllButton").change(function()
			{
				if ($(this).attr("checked") == "checked")
				{
					$(".SelectAllButton,.SelectShopButton").attr("checked", "checked");
				}
				else
				{
					$(".SelectAllButton,.SelectShopButton").removeAttr("checked");
				}
				$(".SelectShopButton").trigger("change");
				$.uniform.update();
			});
			//商品选中框触发change
			$(".SelectOneGoodsButton").change(function()
			{
				if ($(this).attr("checked") == "checked")
				{
					$($(this).attr("data-total")).attr("data-checked", "true");
					$($(this).attr("data-inputId")).attr("data-checked", "true");
				}
				else
				{
					$($(this).attr("data-total")).attr("data-checked", "false");
					$($(this).attr("data-inputId")).attr("data-checked", "false");
				}
				//计算总计
				var total_price = 0;
				var total_number = 0;
				$(".one_goods_total").each(function()
				{
					if ($(this).attr("data-checked") == "true")
					{
						total_price += parseFloat($(this).text().replace(/,/g, ""));
					}
				});

				$(".buy_number_input").each(function()
				{
					if ($(this).attr("data-checked") == "true")
					{
						total_number += parseInt($(this).val());
					}
				});

				$("#all_goods_total_price").html(fomatMoney(total_price.toFixed(2)));
				$("#all_goods_number").html(total_number);
				//如果选择的商品超过0件,则可以进行结算
				if ($("#all_goods_number").html() != "0")
				{
					$("#count_money_button").removeAttr("disabled");
				}
				else
				{
					$("#count_money_button").attr("disabled", "disabled");
				}
			});

			//结算
			$("#count_money_button").click(function()
			{
				var ids = $(".SelectOneGoodsButton:checked");
				var idsStr = "";
				if (ids.length == 0)
				{
					alert("请选择至少一个商品");
					return false;
				}
				for (var i = 0; i < ids.length; i++)
				{
					if (i != (ids.length - 1))
					{
						idsStr += $(ids[i]).attr("data-goodsId") + ",";
					}
					else
					{
						idsStr += $(ids[i]).attr("data-goodsId");
					}
				}
				$("#ids_for_confirm_order").attr("name", "commonStr").val(idsStr);
				$("#form_for_confirm_order").submit();

			});

			//页面加载默认全选
			$(".SelectAllButton").trigger("click");
			$.uniform.update();

			$.post("wc_get_wechat_info",
			{
				"currentUrl" : location.href.split('#')[0]
			}, function(json)
			{
				wx.config(
				{
					debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId : json.appId, // 必填，公众号的唯一标识
					timestamp : json.timestamp, // 必填，生成签名的时间戳
					nonceStr : json.nonceStr, // 必填，生成签名的随机串
					signature : json.signature,// 必填，签名，见附录1
					jsApiList : [ 'onMenuShareTimeline', 'chooseWXPay' ]
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				wx.ready(function()
				{

					$("#wx_kf").click(function()
					{
						$.post("u_wx_create_customservice_do", {}, function(return_json)
						{
							if (return_json.success == true)
							{
								wx.closeWindow();
							}
						},
						//返回类型
						"json");
					});

				});
				wx.error(function(res)
				{
				});
				if ("${buyerSession.buyerId}".length <= 0)
				{
					var code = "${param.code}";
					if (code.length > 0)
					{
						$.post("wc_get_user_info",
						{
							'code' : code
						}, function(return_json)
						{
							if (return_json.success == true)
							{
								//alert("openid(getUserInfo):" + return_json.openid);
							}
						},
						//返回类型
						"json");
					}
					else
					{
						$.post("wc_valid_have_this_person", {}, function(valid_json)
						{
							if (valid_json.success == false)
							{

								var authUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

								authUrl = authUrl.replace("APPID", json.appId);
								authUrl = authUrl.replace("REDIRECT_URI", location.href.split('#')[0]);
								authUrl = authUrl.replace("SCOPE", "snsapi_base");
								authUrl = authUrl.replace("STATE", 1);
								window.location.href = authUrl;
							}
							else
							{
								//alert("openid(validHaveThisPerson):" + valid_json.openid);
							}
						},
						//返回类型
						"json");
					}
				}

			},
			//返回类型
			"json");
		});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
</html>